<template>
	<section>
		<header class="bbtm rela wallfff" v-if="$store.state.Type">
			<a href="javascript: history.back()" class="_h">
				<i class="iconfont icon-Goback"></i>
			</a>
			<h1 class="sz36 hue333 flex_core fontwt hei100">我的油卡</h1>
			<router-link to="/mycentreAll/addoilcard" class="h_">
				<span class="addto hued44">+</span>
			</router-link>
		</header>
		<ul class="mu30" v-if="oilcard">
			<li class="mlr50 mu20" v-for="item in oilcard">
				<router-link :to="{path: '../mycentreAll/oilcardinfo',query: {id: item.OilCard_ID,num: item.OilCard_Num,name: item.OilCardType_Name}}" class="block rela">
					<figure class="l_h0 ">
						<img :src="item.OilCardType_ImageUrl" :alt="item.OilCardType_Name" />
					</figure>
					<p class="carid centre sz36 huefff ">{{item.OilCard_Num}}</p>
				</router-link>
			</li>
		</ul>
		<p v-else class="centre mu30">没有油卡</p>
	</section>
</template>

<script>
	import { InfiniteScroll } from 'mint-ui';
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	export default {
		data() {
			return {
				oilcard: [],
			}
		},
		beforeCreate() {
			let v = this;
			Indicator.open();
			v.$http.get("/WorkMembersOilCard/V1.0/GetMembersOilCard", {
				params: {
					"MembersID": v.$store.state.MembersID
				}
			}).then((res) => {
				Indicator.close();
				if(!res.data.Return_ID) {
					let resdata = res.data.Return_Data;
					if(!resdata || !resdata.length) {
						v.oilcard = null;
						return false;
					}
					v.oilcard = resdata;
				}else{
					Toast(res.data.Return_Mess);
				}
			}).catch((err) => {
				Indicator.close();
			});

		},
	}
</script>

<style scoped>
	li>a {
		height: 4.4rem;
	}
	
	.carid {
		width: 100%;
		position: absolute;
		left: 0;
		top: 60%;
	}
	
	figure,
	figure>img {
		height: 100%;
		width: 100%;
	}
</style>